 <!--
  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
  ~ Modifications Copyright (C) 2018 Huawei Intellectual Property. All rights reserved.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
  
 
<div class="properties-table">
    <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
    <div class="table-header">
        <div class="table-cell col1" (click)="sort('name')">Property Name
            <span *ngIf="sortBy === 'name'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
            </span>
        </div>
        <div class="table-cell col2" (click)="sort('type')" *ngIf="!hidePropertyType">Type
            <span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
            </span>
        </div>
        <div class="table-cell col3" (click)="sort('schema.property.type')" *ngIf="!hidePropertyType">EntrySchema
            <span *ngIf="sortBy === 'schema.property.type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
            </span>
        </div>
        <div class="table-cell valueCol">Value</div>
    </div>
    <div class="table-body" [ngClass]="{'view-mode': readonly}">
        <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>

        <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:vspId">
            <!-- Icon & Instance Name -->
            <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">
                <span [ngClass]="['prop-instance-icon', feInstanceNamesMap[instanceId].iconClass, 'small']"></span>
                {{feInstanceNamesMap[instanceId].name}} 
                <div class="sprite-new archive-label" *ngIf="feInstanceNamesMap[instanceId].originArchived == true"></div>
            </div>
            
            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name "
                (click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
                <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
                <!-- Property Name -->
                    <div class="property-name">
                        <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled || property.isDeclared || readonly"
                            (checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></checkbox>
                        <div class="inner-cell-div-multiline" tooltip="{{property.name}}">
                            <multiline-ellipsis data-tests-id="propertyName" className="table-cell-multiline-ellipsis" [lines]="2">{{property.name}}</multiline-ellipsis>
                        </div>
                    </div>
                    <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"
                        tooltipDelay="0"></span>
                    <div class="delete-button-container">
                        <span *ngIf="showDelete" class="sprite-new delete-btn" [ngClass]="{'disabled' : property.isDisabled || property.isDeclared}" (click)="openDeleteModal(property)" data-tests-id="delete-input-button"></span>
                    </div>
                </div>
                <!-- Property Type -->
                <div class="table-cell col2" *ngIf="!hidePropertyType">
                    <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
                        <span data-tests-id="propertyType">{{property.type | contentAfterLastDot}}</span>
                    </div>
                </div>
                <!-- Property ES (Entry Schema) -->
                <div class="table-cell col3" *ngIf="!hidePropertyType">
                    <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
                        <span>{{property.schema.property.type | contentAfterLastDot}}</span>
                    </div>
                </div>
                <!-- Property Value -->
                <div class="table-cell valueCol" >
<!--     [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
                    <dynamic-property
                        [selectedPropertyId]="selectedPropertyId"
                        [hasDeclareOption]="hasDeclareOption"
                        [canBeDeclared]="hasDeclareOption && true"
                        [property]="property"
                        [expandedChildId]="property.expandedChildPropertyId"
                        [propertyNameSearchText]="propertyNameSearchText"
                        [readonly]="readonly"
                        [disablePropertyValue]="disablePropertyValue"
                        (propertyChanged)="onPropertyChanged(property)"
                        (expandChild)="property.updateExpandedChildPropertyId($event)"
                        (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
                        (checkProperty)="propertyChecked(property, $event)"
                        (toggleTosca)="toggleToscaFunction($event)"
                        >
                        
                    </dynamic-property>
                </div>
            </div>
        </ng-container>

    </div>
</div>